<template>
  <ve-card
    v-if="showInsureItem"
    :title="insureType == 'compulsory' ? '交强险保险单' : '商业险保险单'"
    type="default"
    class="insure-wrapper"
  >
    <template #extra>
      <ve-icon name="delete_1" size="36" @click="delInsuranceFn" />
    </template>
    <InsureItem :info="insureType == 'compulsory' ? form.compulsory[0] : form.business[0]" :filedPrefix="filedPrefix" />
  </ve-card>
</template>

<!-- 交强险 -->
<script setup>
  import { computed, inject } from 'vue'
  import InsureItem from './insure-item.vue'
  const form = inject('form')

  const props = defineProps({
    insureType: {
      type: String,
      default: 'compulsory', // compulsory | business
    },
  })

  // rule 前缀
  const filedPrefix = props.insureType == 'compulsory' ? 'compulsory.0.' : 'business.0.'

  // 是否显示
  const showInsureItem = computed(() => {
    const insureType = props.insureType
    if (insureType == 'compulsory') {
      return form.compulsory?.length > 0
    } else {
      return form.business?.length > 0
    }
  })

  // 删除保险
  const delInsuranceFn = () => {
    uni.showModal({
      title: '提示',
      simple: true,
      content: '确认删除保险单信息吗？',
      cancelText: '取消',
      confirmText: '确认',
      success: function (res) {
        if (res.confirm) {
          // 删除交强险
          if (props.insureType == 'compulsory') {
            form.compulsory.splice(0, 1)
          }
          // 删除商业险
          if (props.insureType == 'business') {
            form.business.splice(0, 1)
          }
        }
      },
    })
  }
</script>

<style lang="less" scoped>
  .insure-wrapper {
    /deep/ .ve-card-header {
      background: #f0f1f3;
    }
    /deep/ .ve-card-content {
      background-color: #f7f8fa;
      .insure-detail-item-title {
        background-color: #e6e8eb;
      }
      .insure-detail-item-content {
        background-color: #eff0f1;
      }
    }
  }
</style>
